<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>淘票票登录</title>
    <link rel="stylesheet" th:href="@{/css/semantic.min.css}">
    <link rel="stylesheet" th:href="@{/css/me.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>
    <script type="text/javascript" th:src="@{/js/slider.js}"></script>
</head>
<body>
<div class="ui  top fixed">
    <div class="ui  secondary  pointing borderless massive menu">
        <div class=" header item logo">
            <a href="#"><img th:src="@{/image/logo.png}" alt="logo"></a>
        </div>
        <a th:href="@{/}" class="active  my-color item nav-item">
            首页
        </a>
        <a th:href="@{/movieList}" class="item nav-item">
            影片
        </a>
        <a th:href="@{/cinemaList}" class="item nav-item">
            影院
        </a>

   <div class='right menu' th:if="${session.user}==null">
        <a th:href='@{/login}' class='item nav-item'>登录</a>
        <a th:href='@{/register}' class='item right-nav-item'>注册</a>
    </div>

    <div class="right menu" th:unless="${session.user}==null">
        <a th:href='@{/user/personalOrder}' class='item right-nav-item'>欢迎,<span th:text="${session.user.username}"></span>用户</a>
        <a th:href='@{/user/logout}' class='item right-nav-item'>退出</a>
    </div>


    </div>
</div>
<div id="demo01" class="flexslider">
    <ul class="slides">
        <li><div class="img"><img th:src="@{/image/index_swiper.jpg}" height="360"  alt="" /></div></li>
        <li><div class="img"><img th:src="@{/image/index_swiper.jpg}" height="360"  alt="" /></div></li>
    </ul>
</div>
<div class="ui container">
    <div class="ui  secondary pointing  segment menu second_menu">

        <div class='active item' id='now_btn'>正在热映(<span th:text="${nowNumber}"></span>)</div>
        <div class='item' id='next_btn'>即将上映(<span th:text="${nextNumber}"></span>)</div>



        <div class="right item">
            <a th:href="@{/movieList}" style="color: red">查看全部 ></a>
        </div>
    </div>
</div>
<div class="ui equal width grid container">
    <div class="row" id="now">
        <div class='column' th:each="nowFilm:${nowFilms}">
                <a th:href='@{/detail/{id}(id=${nowFilm.id})}'>
                    <div class='movie_image'>
                        <img width='164' height='244' th:src='@{${nowFilm.picture}}'>
                        <div class='mask'>
                            <div><span>导演：<font th:text="${nowFilm.director}"></font></span>
                                <span>主演：<font th:text="${nowFilm.actor}"></font></span>
                                <span>类型：<font th:text="${nowFilm.type}"></font></span>
                                <span>地区：<font th:text="${nowFilm.area}"></font></span>
                                <span>语言：<font th:text="${nowFilm.language}"></font></span>
                                <span>片长：<font th:text="${nowFilm.length}"></font>分钟</span>
                            </div>
                        </div>
                        <div class='movie_name' th:text="${nowFilm.name}">电影名称</div>
                    </div></a>
                <a th:href='@{/detail/{id}(id=${nowFilm.id})}'><div class='movie_nowBuy'>在线选票</div></a>
        </div>
    </div>
    <div class="hide row" id="next">
        <div class='column' th:each="nextFilm:${nextFilms}">
                <a th:href='@{/detail/{id}(id=${nextFilm.id})}'>
                    <div class='movie_image'>
                        <img width='164' height='244' th:src='@{${nextFilm.picture}}'>
                        <div class='mask'>
                            <div><span>导演：<font th:text="${nextFilm.director}"></font></span>
                                <span>主演：<font th:text="${nextFilm.actor}"></font></span>
                                <span>类型：<font th:text="${nextFilm.type}"></font></span>
                                <span>地区：<font th:text="${nextFilm.area}"></font></span>
                                <span>语言：<font th:text="${nextFilm.language}"></font></span>
                                <span>片长：<font th:text="${nextFilm.length}"></font>分钟</span>
                            </div>
                        </div>
                        <div class='movie_name' th:text="${nextFilm.name}">电影名称</div>
                    </div></a>
                <a th:href='@{/detail/{id}(id=${nextFilm.id})}'><div class='movie_next'>上映时间:<span th:text="${#dates.format(nextFilm.playTime,'yyyy-MM-dd')}"></span></div></a>
        </div>
    </div>
</div>
<div class="image_warp"></div>
<script>
    $('#demo01').flexslider({
        animation: "slide",
        direction:"horizontal",
        easing:"swing"
    });
    $('#now_btn').click(function () {
        $('#now_btn').addClass('active')
        $('#next_btn').removeClass('active')
        $('#now').removeClass('hide')
        $('#next').addClass('hide')
    })
    $('#next_btn').click(function () {
        $('#next_btn').addClass('active')
        $('#now_btn').removeClass('active')
        $('#next').removeClass('hide')
        $('#now').addClass('hide')
    })
</script>
</body>
</html>